<template>
  <div class="py-6">
    <div class="mb-6">
      <h1 class="text-2xl font-bold text-gray-900">系统设置</h1>
      <p class="mt-1 text-sm text-gray-500">配置系统参数和选项</p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <div class="lg:col-span-1">
        <div class="bg-white shadow sm:rounded-lg">
          <div class="px-4 py-5 sm:p-6">
            <nav class="space-y-1">
              <a href="#" class="bg-primary text-white group rounded-md px-3 py-2 flex items-center text-sm font-medium" aria-current="page">
                <i class="fa fa-cog mr-3 text-white"></i>
                <span>基本设置</span>
              </a>
              <a href="#" class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group rounded-md px-3 py-2 flex items-center text-sm font-medium">
                <i class="fa fa-envelope mr-3 text-gray-400 group-hover:text-gray-500"></i>
                <span>邮件设置</span>
              </a>
              <a href="#" class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group rounded-md px-3 py-2 flex items-center text-sm font-medium">
                <i class="fa fa-bell mr-3 text-gray-400 group-hover:text-gray-500"></i>
                <span>通知设置</span>
              </a>
              <a href="#" class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group rounded-md px-3 py-2 flex items-center text-sm font-medium">
                <i class="fa fa-users mr-3 text-gray-400 group-hover:text-gray-500"></i>
                <span>用户权限</span>
              </a>
              <a href="#" class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group rounded-md px-3 py-2 flex items-center text-sm font-medium">
                <i class="fa fa-database mr-3 text-gray-400 group-hover:text-gray-500"></i>
                <span>数据管理</span>
              </a>
            </nav>
          </div>
        </div>
      </div>

      <div class="lg:col-span-2">
        <div class="bg-white shadow sm:rounded-lg">
          <div class="px-4 py-5 sm:p-6">
            <h2 class="text-lg leading-6 font-medium text-gray-900">基本设置</h2>
            <div class="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
              <div class="sm:col-span-6">
                <label for="system-name" class="block text-sm font-medium text-gray-700">系统名称</label>
                <div class="mt-1">
                  <input type="text" id="system-name" class="shadow-sm focus:ring-primary focus:border-primary block w-full sm:text-sm border-gray-300 rounded-md" value="YT工单派单管理系统">
                </div>
              </div>

              <div class="sm:col-span-6">
                <label for="system-description" class="block text-sm font-medium text-gray-700">系统描述</label>
                <div class="mt-1">
                  <textarea id="system-description" rows="3" class="shadow-sm focus:ring-primary focus:border-primary block w-full sm:text-sm border-gray-300 rounded-md">一站式工单管理解决方案，为客户提供便捷服务，为员工提供高效工具，为管理员提供全面管理功能。</textarea>
                </div>
              </div>

              <div class="sm:col-span-3">
                <label for="default-language" class="block text-sm font-medium text-gray-700">默认语言</label>
                <div class="mt-1">
                  <select id="default-language" class="shadow-sm focus:ring-primary focus:border-primary block w-full sm:text-sm border-gray-300 rounded-md">
                    <option value="zh-CN" selected>简体中文</option>
                    <option value="en">English</option>
                  </select>
                </div>
              </div>

              <div class="sm:col-span-3">
                <label for="timezone" class="block text-sm font-medium text-gray-700">时区</label>
                <div class="mt-1">
                  <select id="timezone" class="shadow-sm focus:ring-primary focus:border-primary block w-full sm:text-sm border-gray-300 rounded-md">
                    <option value="UTC+8" selected>北京时间 (UTC+8)</option>
                    <option value="UTC+0">格林威治时间 (UTC+0)</option>
                    <option value="UTC-5">东部时间 (UTC-5)</option>
                  </select>
                </div>
              </div>

              <div class="sm:col-span-6">
                <label for="logo" class="block text-sm font-medium text-gray-700">系统Logo</label>
                <div class="mt-1 flex items-center">
                  <img class="h-12 w-12 rounded-full" src="https://picsum.photos/id/1015/40/40" alt="系统Logo">
                  <button type="button" class="ml-5 bg-white py-2 px-3 border border-gray-300 rounded-md shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                    更换
                  </button>
                </div>
              </div>

              <div class="sm:col-span-6">
                <div class="flex items-start">
                  <div class="flex items-center h-5">
                    <input id="maintenance-mode" name="maintenance-mode" type="checkbox" class="focus:ring-primary h-4 w-4 text-primary border-gray-300 rounded">
                  </div>
                  <div class="ml-3 text-sm">
                    <label for="maintenance-mode" class="font-medium text-gray-700">维护模式</label>
                    <p class="text-gray-500">启用后，只有管理员可以访问系统</p>
                  </div>
                </div>
              </div>
            </div>

            <div class="mt-8 border-t border-gray-200 pt-5">
              <div class="flex justify-end">
                <button type="button" class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                  取消
                </button>
                <button type="submit" class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                  保存设置
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
</script>